<template>  
    <div class="centered-input-container" v-show="showInput">  
      <input v-model="inputValue" type="text" placeholder="请输入文字并按下Ctrl+Enter确定内容" />   
    </div>  
  </template>  
    
  <script setup>  
  import { ref } from 'vue';  
    
  const showInput = ref(false); //是否展示输入框  
  const inputValue = ref('');   //输入框内容  
    
  // 显示或隐藏输入框  
  const show = () => {  
    showInput.value = showInput.value ? false : true;
  };  
    
  // 暴露给父组件的方法和变量
  defineExpose({  
    show,
    inputValue,
    showInput
  });  
  </script>  
    
  <style scoped>  
  .centered-input-container {  
    position: fixed;  
    top: 50%;  
    left: 50%;  
    transform: translate(-50%, -50%);  
    text-align: center;  
    background-color: #fff;
    width: 16rem;
    height: 2.5rem;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
  }  

  input{
    width: 15rem;
  }
  </style>